<template>
  <Modal title="增加"
         v-model="modelView"
         :mask-closable="false"
         :fullscreen="false"
         :width="800"
         :closable="false"
         @on-visible-change="changeVisible"
         @on-ok="ok">
    <!-- 表单-->
    <Card>
      <p slot="title">
        报表信息
      </p>
      <Form :model="formData" :label-width="80">
        <Row :gutter="16">
          <Col :span="11">
            <FormItem label="报表编码:">
              <Input v-model="formData.reportCode"/>
            </FormItem>
          </Col>
          <Col :span="11">
            <FormItem label="报表名称:">
              <Input v-model="formData.reportName"/>
            </FormItem>
          </Col>
        </Row>
        <Row :gutter="16">
          <Col :span="11">
            <FormItem label="报表类型:">
              <Input v-model="formData.reportType"/>
            </FormItem>
          </Col>
          <Col :span="11">
            <FormItem label="报表sql:">
              <Input v-model="formData.sql"/>
            </FormItem>
          </Col>
        </Row>
      </Form>
    </Card>
    <!-- 列表-->
    <Card style="margin: 10px 0 0 0 " dis-hover>
      <p slot="title">
        报表参数
      </p>
      <Table :data="tableData" :columns="tableColumns" size="small">
        <template slot-scope="{ row, index }" slot="action">
          <Button type="primary" ghost size="small" style="margin-right: 10px" @click="showUpdate(row)">编辑</Button>
          <Button type="error" ghost size="small" style="margin-right: 10px" @click="deleteOne(index)">删除</Button>
        </template>
        <div slot="footer">
          <Button style="width:100%" type="dashed" icon="ios-add" size="small" @click="showAdd()">增加</Button>
        </div>
      </Table>
    </Card>
    <div slot="footer">
      <Button type="text" @click="cancel">取消</Button>
      <Button type="primary" :loading="buttonLoading" @click="ok">确定</Button>
    </div>
    <AddParam :visible.sync="addParamVisible" @on-ok="add"></AddParam>
  </Modal>
</template>

<script>
  import AddParam from "./addParam"

  export default {
    name: "add",
    components: {AddParam},
    props: {
      visible: {
        type: Boolean,
        default: false
      }
    },
    data() {
      return {
        modelView: false,
        formData: {
          reportCode: null,
          reportName: null,
          reportType: null,
          sql: null
        },
        buttonLoading: false,
        tableData: [
          {
            reportParam: 'code',
            paramType: '4',
            paramType_str: '文本框',
            paramName: '编码'
          }
        ],
        tableColumns: [
          {
            title: '参数',
            key: 'reportParam'
          },
          {
            title: '参数类型',
            key: 'paramType_str'
          },
          {
            title: '参数名',
            key: 'paramName',
            tooltip:true
          },
          {
            title: '操作',
            slot: 'action',
            width: 200,
            align: 'center',
            fixed: 'right'
          }
        ],
        addParamVisible: false
      }
    },
    watch: {
      visible(newVal) {
        this.modelView = newVal
      }
    },
    methods: {
      changeVisible() {
        this.formData = {}
        this.tableData= [
          {
            reportParam: 'code',
            paramType: '4',
            paramType_str: '文本框',
            paramName: '编码'
          }
        ]
        this.$emit('update:visible', this.modelView)
      },
      cancel() {
        this.modelView = false
      },
      ok() {
        const self = this
        self.buttonLoading = true
        let newData = JSON.parse(JSON.stringify(self.formData))
        setTimeout(() => {
          self.buttonLoading = false
          self.modelView = false
          self.$Message.success({
            content:'新增成功'
          })
          self.$emit('on-ok', newData)
        }, 1000);
      },
      showAdd() {
        this.addParamVisible = true
      },
      add(val) {
        this.tableData.push(val)
      },
      showUpdate(row) {

      },
      deleteOne(index) {
        this.tableData.splice(index, 1)
      }
    }
  }
</script>

<style scoped>

</style>
